import React, { FC, useContext, useMemo } from 'react'
import { Row, Col, Button } from 'antd';
import { PlayerCtx } from '../context-manager/contextManager';
import classNames from 'classnames';

interface Props {
    // 当前播放的索引
    videoIndex?: number;
    list: any[];
    // 切换形态，list列表型，card卡片型
    // 'Card' | 'List';
    type: string;
    [key: string]: any;
}

/**
 * card
 * @param props 
 */
const Card = (props: any) => {
    const { videoIndex, setVideoIndex } = useContext(PlayerCtx);
    const onClick = () => {
        setVideoIndex && setVideoIndex(props.index);
    }
    return (
        <Col span={6}>
            <Button block onClick={onClick} type={videoIndex === props.index ? 'primary' : 'default'}>
                {props.index + 1}
            </Button>
        </Col>
    )
}

const List = (props: any) => {
    const { videoIndex, setVideoIndex } = useContext(PlayerCtx);
    const onClick = () => {
        setVideoIndex && setVideoIndex(props.index);
    }
    return (
        <li className={classNames({
            'list-item': true,
            'active': props.index === videoIndex
        })} onClick={onClick} >
            <div className='title one-line'>p {props.index + 1} 课程概述 课程概述课程概述课程概述课程概述课程概述课程概述课程概述</div>
            <div className='time'>12:23</div>
        </li>
    )
}

const ListItem: FC<Props> = (props) => {

    return (
        <>
            {/* 采用这中方式，主要是切换type的时候，可以记住滚动的距离 */}
            <div className={classNames({
                'list-ul': true,
                'list-active': props.type === 'Card'
            })}>
                <Row gutter={[10, 10]}>{props.list.map((item, i) => <Card {...item} index={i} key={i} ></Card>)}</Row>
            </div>
            <ul className={classNames({
                'list-ul': true,
                'list-active': props.type === 'List'
            })}>
                {
                    props.list.map((item, i) => <List {...item} index={i} key={i}></List>)
                }
            </ul>
        </>
    );

}

ListItem.defaultProps = {
    type: 'List',
    list: []
}






export default ListItem
